<style>
  #card-field-submit-button {
    width: 100%;
    height: 49px;
    background: #ffc439;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
  }
</style>


<div id="payapl-ads-warp" style="display: flex;flex-direction: column;">

  <label for="12124423" style="display: flex;align-items: center;font-size: 14px;">
    <input type="radio" name="payapl-ads" value="1"  id="12124423">
    <span style="margin-left: 8px;">VISA ending in 190 (expires 2025-12)</span>
  </label>
  <label for="payapl-ads-card" style="display: flex;align-items: center;font-size: 14px;">
    <input type="radio" name="payapl-ads" value="payapl-ads-card"  id="payapl-ads-card">
    <span style="margin-left: 8px;">use a new pyament method</span>
  </label>
  <div id="card-form" style="width: 100%;" class="card_container">
    <div id="card-number-field-container"></div>
    <div style="display: flex;margin-top: 15px;">
      <div style="flex: 1;" id="card-expiry-field-container"></div>
      <div style="width:15px;"></div>
      <div style="flex: 1;" id="card-cvv-field-container"></div>
    </div>
    <button id="card-field-submit-button" style="margin-top: 15px;" type="button">Pay Card</button>
  </div>
</div>




<script>
  $(function () {
    
    moi.createScript("https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id={$api_info['client_id']}", function () {
      if (window.paypal) {
        async function createOrderCallback(data) {
          try {
            const response = await fetch('/checkouts/ecpayment/paypalcompletepayments/ECOrderPay?is_ajax=1&payment_methods=card&order_number={$order_number}', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({ paymentSource: data.paymentSource }),
            }).then((res) => res.json());

            if (response.data.id) {
              return response.data.id;
            } else {
              moi.message({ content: response.data.msg, type: "error" })
            }
          } catch (error) {
            console.error(error);
          }
        }

        async function onApproveCallback(data, actions) {

          try {
            console.log("onApproveCallback");
            console.log(data);
            const response = await fetch(`{$url}&token=` + data.orderID, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
            });

            const orderData = await response.json();
            if (orderData.data.redirect_url) {
              location.href = orderData.data.redirect_url
            } else {
              moi.message({ content: orderData.data.msg, type: "error" })
            }
          } catch (error) {
            console.error(error);
          }
        }

        const cardField = window.paypal.CardFields({
          createOrder: createOrderCallback,
          onApprove: onApproveCallback,
        });

        if (cardField.isEligible()) {
          const style = {
            "body": {
              "padding": "0"
            },
            'input': {
              'font-size': '16px',
              'color': '#333333',
              "padding": "12px"
            },
            ':focus': {
              'color': 'blue',
              "box-shadow": "none"
            },
            '.valid': {
              'color': '#333333'
            },
            '.invalid': {
              'color': 'red'
            }
          }
          const nameField = cardField.NameField({
            style
          });
          nameField.render("#card-name-field-container");

          const numberField = cardField.NumberField({ style });
          numberField.render("#card-number-field-container");

          const cvvField = cardField.CVVField({ style });
          cvvField.render("#card-cvv-field-container");

          const expiryField = cardField.ExpiryField({ style });
          expiryField.render("#card-expiry-field-container");

          // Add click listener to submit button and call the submit function on the CardField component
          document
            .getElementById("card-field-submit-button")
            .addEventListener("click", () => {
              cardField.submit()
            });
        } else {
          document.querySelector("#card-form").style = "display: none";
        }
      }
    })


  })

</script>